<template  >
  <div >
    <div  style="width: 400px; height:300px; display:block; margin: 0 auto " :id="'scatterChart' + scat_id" />
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { ScatterChart, LineChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent,
  LegendComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ScatterChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  MarkLineComponent,
  LegendComponent
])

export default {
  data() {
    return {
      params: {
        y: 123,
        x: 456
      },
      x_expList: [],
      y_expList: [],
      n_date: [],
      expMax_date: [],
      expMin_date: [],
      exp_date: [],
      date_poke: [],
      date: [],
      option: {
        title: {
          // text: '带拟合线的散点图',
          textStyle: {
            color: '#6495ED',
            fontSize: '15',
            fontFamily: 'YouYuan'
          },
          left: '5%',
          top: '11%'
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(204, 229, 255, 0.8)',
          borderColor: '#333',
          formatter: function(arg) {
            console.log(arg, 'arg')
            return '横坐标 :' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' + arg.data[2] + '</br>' + '纵坐标 :' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + arg.data[1]
          }
        },
        // legend: {
        //   data: ['正常点', '异常点', '拟合线', '123'],
        //   left: '20%',
        //   top: '11%'
        // },
        dataset: [
          {
            source: {
              'x': [],
              'y': [],
              'date': []
            }
          },
          {
            source: {
              'x': [],
              'y': [],
              'date': []
            }
          },
          {
            source: {
              'x': [],
              'y': [],
              'date': []
            }
          }
        ],
        xAxis: [{ type: 'time', splitLine: { show: true }, maxInterval: 3600 * 24 * 1000 * 10 },
          { gridIndex: 0, type: 'value', splitLine: { show: true }, show: false }],
        // xAxis: { gridIndex: 0, type: 'value', splitLine: { show: true }},
        yAxis: { gridIndex: 0, type: 'value' },
        series: [
          {
            datasetIndex: 0,
            xAxisIndex: 1,
            name: '正常点',
            type: 'scatter',
            encode: { x: 'x', y: 'y' }
          },
          {
            datasetIndex: 1,
            xAxisIndex: 1,
            name: '异常点',
            type: 'scatter',
            encode: { x: 'x', y: 'y' },
            itemStyle: {
              color: 'red'
            }
          },
          {
            datasetIndex: 2,
            xAxisIndex: 1,
            name: '拟合线',
            type: 'line',
            smooth: true,
            symbolSize: 0.1,
            symbol: 'circle',
            encode: { x: 'x', y: 'y' }
          }
        ]
      }
    }
  },
  created() {
    this.getDate()
    this.concatFatherData()
  },
  mounted() {
    this.Drawing()
  },
  methods: {
    getDate: function() {
      this.n_date = this.redis_Data.nor_date
      this.expMax_date = this.redis_Data.max_date
      this.expMin_date = this.redis_Data.min_date
    },
    concatFatherData: function() {
      this.y_expList = this.redis_Data.y_max_exp.concat(this.redis_Data.y_min_exp)
      this.x_expList = this.redis_Data.x_max_exp.concat(this.redis_Data.x_min_exp)
      this.exp_date = this.expMax_date.concat(this.expMin_date)
      this.date = this.exp_date.concat(this.n_date)
    },
    Maxxaxis: function() {
      var max = Math.ceil(Math.max.apply(null, this.redis_Data.x.concat(this.x_expList)))
      return max
    },
    Maxyaxis: function() {
      var max = Math.ceil(Math.max.apply(null, this.redis_Data.y.concat(this.y_expList)))
      return max
    },
    Minxaxis: function() {
      var min = Math.floor(Math.min.apply(null, this.redis_Data.x.concat(this.x_expList)))
      return min
    },
    Minyaxis: function() {
      var min = Math.floor(Math.min.apply(null, this.redis_Data.y.concat(this.y_expList)))
      return min
    },
    Drawing() {
      console.log(this.date, 'date')
      for (var i = 0; i < this.date.length; i++) {
        var time = new Date(this.date[i])
        this.date_poke.push(time.getTime())
      }
      var maxpoke = this.date_poke[0]
      for (var j = 1; j < this.date_poke.length; j++) {
        if (this.date_poke[j] > maxpoke) { maxpoke = this.date_poke[j] }
      }
      var minpoke = this.date_poke[0]
      for (var l = 1; l < this.date_poke.length; l++) {
        if (this.date_poke[l] < minpoke) { minpoke = this.date_poke[l] }
      }
      console.log(new Date(maxpoke), 'maxpoke')
      console.log(new Date(minpoke), 'minpoke')
      const a = new Date(maxpoke)
      const b = new Date(minpoke)
      const list1 = {
        'x': this.redis_Data.x,
        'y': this.redis_Data.y,
        'date': this.n_date
      }
      this.option.dataset[0].source = list1
      // const a = new Date()
      // const back = a - 45 * 3600 * 24 * 1000
      // var b = new Date(back)
      this.option.xAxis[0].max = a
      this.option.xAxis[0].min = b
      this.option.xAxis[1].max = this.Maxxaxis()
      this.option.xAxis[1].min = this.Minxaxis()
      this.option.yAxis.max = this.Maxyaxis()
      this.option.yAxis.min = this.Minyaxis()
      const list2 = {
        'x': this.x_expList,
        'y': this.y_expList,
        'date': this.exp_date
      }
      this.option.dataset[1].source = list2
      const list3 = {
        'x': this.redis_Data.x,
        'y': this.redis_Data.fx
      }
      this.option.dataset[2].source = list3

      const scatterEl = document.getElementById('scatterChart' + this.scat_id)
      console.log(scatterEl)
      const myChart = echarts.init(scatterEl)
      myChart.setOption(this.option, true)
      const xirOpts = {
        height: scatterEl.clientHeight,
        width: scatterEl.clientWidth
      }
      window.onresize = function() {
        myChart.resize(xirOpts)
      }
    }
  },
  props: {
    redis_Data: {
      type: Object,
      default: () => ({})
    },
    scat_id: {
      type: String,
      default: ''
    },
    showEmpty: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
#scatterChart{
  width: 100%;
  height: 500px;
}

</style>
